$(document).ready(function() {
  $('#makes').offset($('#attempts').offset());
  var attempts = heatmapFactory.create({'element': $('#attempts')[0], 'radius': 25, 'visible': true});
  var makes = heatmapFactory.create({'element': $('#makes')[0], 'radius': 25, 'visible': false});

  $('#attempts').mouseenter(function() {
    attempts.toggleDisplay();
    makes.toggleDisplay();
  });

  $('#makes').mouseleave(function() {
    attempts.toggleDisplay();
    makes.toggleDisplay();
  });

  $.each(heatmap_data, function(k, v) {
    $('#player').append(
      $('<option />').val(k).text(v.n)
    );
  });

  $('#player').change(function() {
    data = heatmap_data[this.value];
    attempts.store.setDataSet(data['a']);
    makes.store.setDataSet(data['m']);
  });
});